<template>
  <div>
    <el-row class="card-row" type="flex" justify="space-around">
      <el-col :span="4">
        <project-data-card
          :imgUrl="img.ImgSold"
          title="已售"
          mount="1,000,000"
        />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="未售" mount="10,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="已交付" mount="1,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="商铺" mount="1,000,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="公寓" mount="1,000" />
      </el-col>
    </el-row>
    <el-row class="card-row" type="flex" justify="space-around">
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="未交付" mount="1,000,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="业主" mount="1,000,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="租客" mount="1,000,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="住宅" mount="1,000,000" />
      </el-col>
      <el-col :span="4">
        <project-data-card :imgUrl="imgUrl" title="车位" :mount="count" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProjectDataCard from "./ProjectDataCard";
import imgUrl from "@/assets/img/project-data.png";
import ImgSold from "@/assets/img/project-data/sold.png";

export default {
  name: "ProjectData",
  components: {
    ProjectDataCard
  },
  data() {
    return {
      imgUrl: imgUrl,
      img: {
        ImgSold: ImgSold
      }
    };
  },
  computed: {
    count() {
      return String(this.$store.state.count);
    }
  }
};
</script>

<style scoped></style>
